<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../common/jspcommon.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>果果街</title>

<link href="css/home_css/home.css" rel="stylesheet" type="text/css" />
<link href="css/base.css" rel="stylesheet" type="text/css" />
<link href="js/jquery_pager/Pager.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<script type="text/javascript" src="js/jquery.MultiFile.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.json-2.2.min.js"></script>
<script src="js/jquery_pager/jquery.pager.js" type="text/javascript"></script>
<script src="js/jquery.blockUI.js" type="text/javascript"></script>
<script type="text/javascript" src="js/home_js/new.js"></script>
<script type="text/javascript" src="js/home_js/xxk.js"></script>
<script type="text/javascript" src="js/home_js/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="js/xheditor/xheditor-1.1.7-zh-cn.min.js"></script>
<script type="text/javascript" src="js/avatarCut.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.js"></script>
<script type="text/javascript" src="js/jquery.jhistory.js"></script>
<script type="text/javascript" src="js/jquery.ba-hashchange.js"></script>
<link rel="stylesheet" href="js/artZoom/jquery.artZoom.css" type="text/css" />

<script type="text/javascript" src="js/artZoom/jquery.artZoom.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<c:choose>
	<c:when test="${family.skin != null && family.skin != ''}">
		<link href="${family.skin}" rel="stylesheet" type="text/css"  />
	</c:when>
	<c:otherwise>
		<link href="css/home_css/p_home.css" rel="stylesheet" type="text/css" />
	</c:otherwise>
</c:choose>
<script type="text/javascript">
	
	$(document)
			.ready(
					function() {

						var localPath = document.location.href;
						if (localPath.lastIndexOf("#") != -1) {
							var localFunctionName = localPath
									.substring(localPath.lastIndexOf("#"));
							if (!IsNull(localFunctionName)
									&& localFunctionName != '#') {
								doHashFunction(localFunctionName);
							}
						}

						if ("${albumId}" != "") {
							$("#content_detail")
									.load(
											"taAlbumInfo.htm?family=${family.doorplate}",
											function(data) {
												albumPagePhoto("${albumId}");
											});
							my_family_navigate();
							$("#my_family_navigate3").attr("class",
									"h_navhover fb");
						}

						if ("${blogId}" != "") {
							$("#content_detail")
									.load(
											"enterTaBlog.htm?family=${family.doorplate}",
											function() {
												enterComment('${blogId}');
											});
							my_family_navigate();
							$("#my_family_navigate2").attr("class",
									"h_navhover fb");
						}
						$("#ta_family_right").load(
								"taFamilyRight.htm?family=${family.doorplate}");
						$("#feedList")
								.load(
										"taFeed.htm?doorplate=${otherFamilyId}&feedGroup=allFeed");
						$("#leaveMessage")
								.load(
										"leaveMessage.htm?otherFamilyId=${family.doorplate }");
						$.metadata.setType("attr", "validate");
						$("#send_message_family_form").validate();
					});
	function addFriendButton(doorplate) {
		$("#add_friend_dialog").load("friendAdd.htm?doorplate=" + doorplate);
		$("#add_friend_dialog").show();
	}
	
	//加载通过标签查找好友的结果页面
	function toSearchFriendByTag(tagName){
		$("#content_detail").load("enterSearchFriend.htm",function(){
			$("#searh_friend").load("searchFriend.htm",{tag:tagName},function(){
				window.scrollTo(0,0);
			});
		});
	}

	//查看家庭成员的详细信息
	function seeDetailAll(memberId) {
		my_family_navigate();
		$("#my_family_navigate1").attr("class", "h_navhover fb");
		$("#content_detail").load("memberDetail.htm?memberId=" + memberId);
	}

	function sendMessageFamily(otherFamily) {
		if ($("#send_message_family_form").valid()) {
			var msg = $("#msgContent").val();
			$.post("sendMessageFamily.htm", {
				family : otherFamily,
				msgContent : msg
			}, function(data) {
				if (data == 'success') {
					sendMessageFamilyCancel();
					operateTip('message_send_tip_success');
				}
			});
		}
	}

	function sendMessageFamilyCancel() {
		$("#msgContent").val("");
		$('#ta_family_send_message').hide();
	}

	//他家相册页面
	function albumInfo() {
		my_family_navigate();
		$("#my_family_navigate3").attr("class", "h_navhover fb");
		$("#content_detail").load("taAlbumInfo.htm?family=${family.doorplate}");
	}

	//他家日志页面
	function blogInfo() {
		my_family_navigate();
		$("#my_family_navigate2").attr("class", "h_navhover fb");
		$("#content_detail").load("enterTaBlog.htm?family=${family.doorplate}&reload=yes");
	}

	//他家邻居页面
	function taFriend() {
		my_family_navigate();
		$("#my_family_navigate4").attr("class", "h_navhover fb");
		$("#content_detail").load("taFriend.htm?family=${family.doorplate}");
	}

	//清除横向菜单栏的样式
	function my_family_navigate() {
		$("#my_family_navigate1").attr("class", "");
		$("#my_family_navigate2").attr("class", "");
		$("#my_family_navigate3").attr("class", "");
		$("#my_family_navigate4").attr("class", "");
		//$("#my_family_navigate5").attr("class", "");
	}
</script>

</head>

<body>
<div class="bg">
	<!-- 头部 -->
	<div class="h_top">
		<div class="w960" style="position:relative;">
		<ul class="h_login">
			<li class="h_tophover"><a href="family?id=${myFamily.doorplate}"><c:out
						value="${myFamily.nickname}" /> </a>|</li>
			<li><a href="logout.htm">退出</a></li>
		</ul>
		<%-- 
		<ul>
			<li class="h_tophover"><a href="family?id=${family.doorplate}">网站首页</a></li>
			<li><a href="#">果果堂</a></li>
			<li><a href="#">果果商铺</a></li>
			<li><a href="#">果果家政</a></li>
			<li><a href="#">果果贴吧</a></li>
		</ul>
		--%>
		</div>
	</div>
	<div class="clear"></div>
	<!--导航-->
	<div class="h_navbox w960">
		<h1>
			<a href="javascript:void(0);"></a>
		</h1>
		<div class="h_nav">
			<ul>
				<li class="h_havbg01"></li>
				<li class="h_havbg02"></li>
				<li class="h_navhover fb" id="my_family_navigate1"><a
					href="family?id=${family.doorplate}">首页</a></li>
				<li id="my_family_navigate2"><a href="javascript:void(0);"
					onclick="setHash('#blogInfo')">日志</a></li>
				<li id="my_family_navigate3"><a href="javascript:void(0);"
					onclick="setHash('#albumInfo')">相册</a></li>
				<li id="my_family_navigate4"><a href="javascript:void(0);"
					onclick="setHash('#taFriend')">邻居</a></li>
			</ul>
			<form method="get">
				<table>
					<tr>
						<td><a href="family?id=${sessionScope.member.family }"
							style="color: white; font-size: 12px;">回到我家</a> &nbsp;&nbsp;</td>
					</tr>
				</table>
			</form>
		</div>
		<div class="clear"></div>
	</div>

	<div class="h_main w960">
		<!--侧边栏-->
		<div class="h_sidebar">
			<div class="sldebar_top"></div>
			<div class="sldebar_conter">
				<div class="h_about">
					<div class="h_figureName">
						<c:out value="${family.nickname}" />
					</div>
					<div class="numbers">
						门牌号：<span>${family.doorplate}</span>
					</div>
					<div class="h_aboutText">
						<strong>【家的简介】</strong>
						<p>
							<c:if
								test="${family.introduction==null || family.introduction=='' }">
							暂时还没有家的简介
						</c:if>
							<c:if
								test="${family.introduction!=null && family.introduction!='' }">
							${family.introduction }
						</c:if>
						</p>
					</div>
				</div>
				<div class="h_figure_mf">
					<ul>
						<c:forEach items="${memberList}" var="member">
							<c:if test="${member.role eq '01'}">
								<li><a href="javascript:void(0);" style="cursor: pointer;"
									onclick="setHash('#seeDetailAll,${member.identifier}')"> <img
										src="${member.avatar}" width="34" height="34" alt="果果街" /> </a> <strong>
										<a href="javascript:void(0);" style="cursor: pointer;"
										onclick="setHash('#seeDetailAll,${member.identifier}')">
											${member.username} </a> </strong> <c:if
										test="${member.constellation!=null && member.constellation!='' && member.constellation!=13 }">
										${member.constellationLabel }的爸爸									
									</c:if></li>
							</c:if>
							<c:if test="${member.role eq '02'}">
								<li><a href="javascript:void(0);" style="cursor: pointer;"
									onclick="setHash('#seeDetailAll,${member.identifier}')"> <img
										src="${member.avatar}" width="34" height="34" alt="果果街" /> </a> <strong>
										<a href="javascript:void(0);" style="cursor: pointer;"
										onclick="setHash('#seeDetailAll,${member.identifier}')">
											${member.username} </a> </strong> <c:if
										test="${member.constellation!=null && member.constellation!='' && member.constellation!=13 }">
										${member.constellationLabel }的妈妈							
									</c:if></li>
							</c:if>
						</c:forEach>
					</ul>
					<div class="clear"></div>
				</div>
				<div class="h_baby">
					<h2>宝宝信息</h2>
					<div class="h_figure_mf p0">
						<ul>
							<c:set var="sons" value="0" scope="page" />
							<c:forEach items="${memberList}" var="member">
								<c:if test="${member.role eq '05'}">
									<li><a href="javascript:void(0);"
										onclick="setHash('#seeDetailAll,${member.identifier}')"> <img
											src="${member.avatar}" style="cursor: pointer;" width="34"
											height="34" alt="果果街" /> </a>
										<p>
											<em> <a href="javascript:void(0);"
												onclick="setHash('#seeDetailAll,${member.identifier}')">
													${member.username} </a> </em><br /> <span><c:if
													test="${member.sex eq 'M'}">男孩</c:if> <c:if
													test="${member.sex eq 'F'}">女孩</c:if> </span>${member.age}岁
										</p>
									</li>
									<c:set value="${sons+1 }" var="sons" scope="page" />
								</c:if>
							</c:forEach>
						</ul>
						<c:if test="${sons == 0 }">
							宝宝正在创造中...
						</c:if>
					</div>
				</div>
				<%--
				<div class="view_tags_box">
					<h2>小仙宝典标签</h2>
					<div class="view_tags">
						<a style="font-size: 16px; color: #69ad2d;" href="#">音乐</a> <a
							style="font-size: 12px; color: #000;" href="#">游戏</a> <a
							style="font-size: 14px; color: #002aff;" href="#">WOW</a> <a
							style="font-size: 12px; color: #ad3a3a;" href="#">篮球</a> <a
							style="font-size: 14px; color: #000;" href="#">画画</a> <a
							style="font-size: 12px; color: #ff0000;" href="#">打架</a>
					</div>
				</div>
				<div class="h_apps">
					<h3>
						<a href="#">TA家正在使用的APP</a>
					</h3>
					<ul>
						<li></a><img src="<%=basePath%>images/home_images/ico04.png"
							alt="投票" /><a href="#">日历</a></li>
						<li></a><img src="<%=basePath%>images/home_images/ico05.png"
							alt="短消息" /><a href="#">帐薄</a></li>
						<li></a><img src="<%=basePath%>images/home_images/ico06.png"
							alt="打招呼" /><a href="#">健康APP</a></li>
						<li></a><img src="<%=basePath%>images/home_images/ico05.png"
							alt="打招呼" /><a href="#">健康APP</a></li>
					</ul>
				</div>
				 --%>
				<div class="h_gg1">
					<img src="images/home_images/ad.gif" alt="奶粉" />
				</div>
			</div>
			<div class="sldebar_bottom"></div>
		</div>
		<!--内容快-->
		<div class="w805">
			<div class="h_main2_top"></div>
			<div id="content_detail">
				<div class="w805">
				<div class="h_main2 ">
					<div class="h_content" id="taFamily_middle">
						<div class="cee_figureBox">
							<div class="cee_figureLeft">
								<div class="cee_figure">
									<div class="h_figure">
										<img src="${family.avatar}" alt="果果街" />
									</div>
									<%--
								<div class="h_level mt5">
									<ul>
										<li>积分：<img
											src="<%=basePath%>images/home_images/ico27.png" alt="积分" />16积分</li>
									</ul>
								</div>
								 --%>
								</div>
							</div>
							<div id="add_friend_dialog" class="addFriend"
								style="display: none; left: 45%; top: 20%"></div>

							<div class="cee_figureRight">
								<div class="cee_figureName">
									<c:if test="${doing.content==null ||  doing.content==''}">
										<h2>一家子好久都没有动态了</h2>
									</c:if>
									<c:if test="${doing.content!=null &&  doing.content!=''}">
										<h2>${memberDoing.username }(${family.nickname }）</h2>
										<p>
											${doing.replaceContent }
											<span>${doing.lastDate }</span>
										</p>
									</c:if>
									<div class="clear"></div>
								</div>
								<div class="add_friend">
									<ul>
										<c:if test="${isFriend=='NO' }">
											<li><img src="<%=basePath%>images/home_images/jia.gif"
												alt="加为邻居" title="加为邻居" style="cursor: pointer;"
												onclick="addFriendButton('${family.doorplate }')" /></li>
										</c:if>
										<!-- 
									<li class="add_friendBg1"><a href="#">加关注</a></li>
									<li class="add_friendBg2">已关注，<a href="#">取消关注</a></li>
									 -->
										<li><a href="javascript:void(0);"
											onclick="$('#ta_family_send_message').show();">发信息</a>
										</li>
									</ul>
									<div class="clear"></div>
								</div>
								<div class="success" id="message_send_tip_success"
									style="width: 200px; display: none;">
									<img alt="保存成功" src="images/home_images/ico29.png" />消息已经发送
								</div>
								<div class="success" id="message_send_friend_tip_success"
									style="width: 200px; display: none;">
									<img alt="保存成功" src="images/home_images/ico29.png" />邻居请求已经发送
								</div>
							</div>
							<div class="clear"></div>
							<%--
						<div class="badgeBox">
							<a href="#"><img
								src="<%=basePath%>images/home_images/jian_01.gif" alt="1" /> </a><a
								href="#"><img
								src="<%=basePath%>images/home_images/jian_02.gif" alt="1" /> </a><a
								href="#"><img
								src="<%=basePath%>images/home_images/jian_03.gif" alt="1" /> </a><a
								href="#"><img
								src="<%=basePath%>images/home_images/jian_04.gif" alt="1" /> </a><a
								href="#"><img
								src="<%=basePath%>images/home_images/jian_05.gif" alt="1" /> </a>
						</div>
						 --%>
						</div>
						<div class="h_news">
							<img src="<%=basePath%>images/home_images/ad1.jpg" alt="广告" />
						</div>
						<!--动态-->
						<div class="h_newNews" id="tabClear">
							<ul>
								<li id="newNews1" class="h_newNewsHover" onclick="tabFeed('allFeed',this)"><a>全部动态</a></li>
								<li id="newNews2" class="" onclick="tabFeed('doing',this)"><a>广播</a></li>
								<li id="newNews3" class="" onclick="tabFeed('blog',this)"><a>日志</a></li>
								<li id="newNews4" class="" onclick="tabFeed('album',this)"><a>相册</a></li>
							</ul>
							<div class="clear"></div>
						</div>
						<div class="h_newNews_box" id="feedList"></div>
						<!--留言板-->
						<div id="leaveMessage"></div>
					</div>
					<div class="h_sidebar2" id="ta_family_right"></div>
				</div>
			</div>
			</div>
			<div class="h_main2_bottom"></div>
		</div>
		<div class="clear"></div>
	</div>
	<div class="h-list" id="family_tip"
		onmouseover="showObject('family_tip');"
		onmouseout="hideObject('family_tip');"></div>
	<%-- 尾部 --%>
	<div class="footer">
		<%@include file="../common/footer.jsp"%>
	</div>
	<div id="ta_family_send_message" style="display: none;">
		<form action="sendMessageFamily.htm" id="send_message_family_form">
			<div class="addFriend" style="height: 180px; left: 45%; top: 20%">
				<h4>
					<a href="javascript:void(0);" onclick="sendMessageFamilyCancel();"></a>
					给&nbsp;
					<c:out value="${family.nickname}" />
					&nbsp;发信息
				</h4>
				<div class="addFriend_imgBOX">
					<img src="${family.avatar}" alt="xx" width="58" height="58"
						id="add_friend_image" /> 发送消息：
					<textarea name="msgContent" cols="" rows="" id="msgContent"
						validate="{required:true,maxlength:500,messages:{required:'发送消息不能为空',maxlength:'长度不能超过500个字符'}}"></textarea>
				</div>
				<div class="addFriendAn">
					<div class="h_button fr ml5 mt5 mr15"
						onclick="sendMessageFamilyCancel();">
						<strong>取 消</strong>
					</div>
					<div class="h_button fr mt5"
						onclick="sendMessageFamily('${family.doorplate}');">
						<strong>确 定</strong>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
</body>

</html>